<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas绘制坐标系</title>
  <link rel="stylesheet" href="./modelCss/reset.css">
  <style>
    #mycanvas {
      width: 600px;
      height: 500px;
      border: 1px solid black;
      /* background:rgb(68, 68, 68); */
      margin: auto;
      margin-top: 100px;
    }

    .xy {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .xy span:nth-child(2) {
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <div class="xy">
    <span id="x">x:100</span>
    <span id="y">y:100</span>
  </div>
  <div id="mycanvas">
    <canvas id="firCan">当前浏览器版本过低不支持canvas，请升级！</canvas>
  </div>
</body>

</html>
<script>
  var mycanvas = document.querySelector('#mycanvas');
  var firCan = document.querySelector('#firCan');
  var boxX = document.querySelector('#x');
  var boxY = document.querySelector('#y');
  // 获取div的宽
  var boxWidth = mycanvas.clientWidth;
  // 获取div的高
  var boxHeight = mycanvas.clientHeight;

  // 设置canvas的宽和高
  firCan.width = boxWidth;
  firCan.height = boxHeight;
  // 获取2D渲染上下文
  var context = firCan.getContext('2d');
  // 绘制X轴
  context.beginPath();
  context.moveTo(0, boxHeight / 2);
  context.lineTo(boxWidth, boxHeight / 2);
  context.stroke();

  // 绘制X轴上箭头
  context.moveTo(boxWidth, boxHeight / 2);
  context.lineTo(boxWidth - 10, boxHeight / 2 - 5);
  context.stroke();
  // 绘制X轴下箭头
  context.moveTo(boxWidth, boxHeight / 2);
  context.lineTo(boxWidth - 10, boxHeight / 2 + 5);
  context.stroke();

  // 绘制Y轴
  context.moveTo(boxWidth / 2, 0);
  context.lineTo(boxWidth / 2, boxHeight);
  context.stroke();

  // 绘制Y轴左箭头
  context.moveTo(boxWidth / 2, 0);
  context.lineTo(boxWidth / 2 - 5, 10);
  context.stroke();
  // 绘制Y轴右箭头
  context.moveTo(boxWidth / 2, 0);
  context.lineTo(boxWidth / 2 + 5, 10);
  context.stroke();

  context.font = 'italic 14px KTkaiti';
  // 绘制原点O点、x、y
  context.fillText('O', boxWidth / 2 + 2, boxHeight / 2 + 14)
  context.fillText('x', boxWidth - 24, boxHeight / 2 + 16)
  context.fillText('y', boxWidth / 2 - 24, 0 + 16)

  // canvas添加鼠标移动事件
  firCan.onmousemove = function (e) {
    let x = e.offsetX - boxWidth / 2;
    let y = -e.offsetY + boxHeight / 2;
    boxX.innerHTML = `x:${x}`;
    boxY.innerHTML = `y:${y}`;
  }


  // var arr = [10, 50, 80, 60, 140, 60, 180];
  // drawZX(arr, 'white')

  // 绘制折线的方法
  function drawZX(arr, color) {
    let Xlength = arr.length;
    // X轴间隙距离
    let Xspace = Math.floor((boxWidth / 2) / arr.length);
    //绘制折线 
    context.beginPath()
    context.strokeStyle = color;
    // 从原点开始
    context.moveTo(boxWidth / 2, boxHeight / 2);
    // 遍历数组绘制折线
    for (var i = 0; i <= arr.length; i++) {
      context.lineTo((boxWidth / 2) + (Xspace * i), (boxHeight / 2) - arr[i]);
      // 绘制圆
      context.arc((boxWidth / 2) + (Xspace * i), (boxHeight / 2) - arr[i], 3, 0, Math.PI * 2, false)
    }
    context.stroke();
  }
</script>